<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div class="note">js custom event</div>
    <script>
        function hightlight(elem) {
            const bgColor = 'yellow';
            elem.style.backgroundColor = bgColor;
            let event = new CustomEvent('highlight', {
                detail: {
                    backgroundColor: bgColor
                }
            });
            // dispatch event
            elem.dispatchEvent(event);
        }

        let div = document.querySelector('.note');
        function addBorder(elem) {
            elem.style.border = '1px solid red';
        }

        div.addEventListener('highlight', function (e) {
            console.log(e.detail.backgroundColor);
            addBorder(this);
            console.log('highlight event fired');
            console.log(e.detail);
        });
        // hightlight div element
        hightlight(div);
    </script>
</body>

</html>